/*
 * @Author: your name
 * @Date: 2021-04-30 10:21:08
 * @LastEditTime: 2022-04-08 09:45:09
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \react-gu-li\src\pages\charts\bar.jsx
 */
import React, { Component  } from 'react'
// import echarts from 'echarts/lib/echarts'// 引入 ECharts 主模块
//import ReactEcharts from 'echarts-for-react';
import * as echarts from "echarts/lib/echarts";
//import echarts from 'echarts/lib/echarts'; 
// 引入柱状图（这里放你需要使用的echarts类型 很重要）
import  'echarts/lib/chart/bar';

// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import { GridComponent } from 'echarts/components';
echarts.use([GridComponent]);

export default class Bar extends Component {

    componentDidMount() {
		// 初始化echarts实例，将其挂载到id为main的dom元素上展示 
		var myChart = echarts.init(document.getElementById("main"));
		// 绘制图表 
		myChart.setOption({
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: [120, 200, 150, 80, 70, 110, 130],
                  type: 'bar'
                }
              ]
		})
	}
   
    render() {
        return (
            <div id = "main"
            style = {
                {
                    width: '100%',
                    height: '100%'
                }
            }> </div>
        )
    }
}

